<template>
  <div class="menu">
    <div class="main-content">
      <div class="content-wrap">
        <div class="table-data">
          <el-table
            class="table-height"
            :data="tableData"
            row-key="id"
            default-expand-all
          >
            <el-table-column label="名称" prop="name" align="left" width="300">
            </el-table-column>
            <el-table-column label="权限值" prop="code" align="center">
            </el-table-column>
            <el-table-column label="修改时间" prop="date" align="center">
            </el-table-column>
            <el-table-column
              label="操作"
              prop="operation"
              width="320"
              align="center"
            >
              <template #default="{ row }">
                <div class="table-btn-wrap">
                  <button
                    class="add"
                    v-if="row.level != 4"
                    @click="handleAdd(row)"
                  >
                    {{
                      row.level == 1
                        ? "新增菜单"
                        : row.level == 2
                        ? "新增菜单"
                        : row.level == 3
                        ? "新增功能"
                        : ""
                    }}
                  </button>
                  <button class="edit" @click="editMenu(row)">编辑</button>
                  <button class="del">删除</button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- <div class="pagination">
          <Pagination
            v-model:currentPage="params.currentPage"
            :total="total"
            v-model:page-size="params.pageSize"
          />
        </div> -->
      </div>
    </div>
    <Dialog
      v-model:showDialog="showDiaLog"
      :headerName="titleName"
      diaWidth="28"
      footerPadding="90px 10px 20px 0"
      diaTop="20"
    >
      <template #content>
        <div class="dia-content">
          <el-form :model="diaForm" label-width="120px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="名称">
                  <el-input
                    :class="addUserFlaf ? '' : 'add-bgc'"
                    clearbaler
                    v-model="diaForm.fs"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="权限值">
                  <el-input
                    clearbaler
                    :class="addUserFlaf ? '' : 'add-bgc'"
                    v-model="diaForm.fs"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </template>
    </Dialog>
  </div>
</template>
<script lang="ts" setup>
import { Search } from "@element-plus/icons-vue";
let showDiaLog = ref(false);
let selVal = ref(1);
let diaForm = reactive({});
let params = reactive({});
let titleName = ref("");
let options = [{ label: 1, value: 1 }];
let addUserFlaf = ref(true);
const defaultProps = {
  children: "children",
  label: "label",
};
let total = ref(1);
let handleAdd = () => {
  addUserFlaf.value = true;
  showDiaLog.value = true;
  titleName.value = "新增菜单";
};
let tableItem = ref([]);

const tableData = [
  {
    name: "全部数据",
    date: "2022-01-01",
    id: 0,
    level: 1,
    children: [
      {
        id: 1,
        name: "变电站综合自动化",
        code: "ele",
        level: 2,
        date: "2022-01-01",
        children: [
          {
            id: 2,
            name: "变配电状态",
            code: "ele1",
            level: 3,
            date: "2022-01-01",
            children: [
              {
                id: 3,
                level: 4,
                name: "新增",
                code: "Btn.ele1.add",
                date: "2022-01-01",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    name: "全部数据",
    date: "2022-01-01",
    id: 0,
    level: 1,
    children: [
      {
        id: 1,
        name: "变电站综合自动化",
        code: "ele",
        level: 2,
        date: "2022-01-01",
        children: [
          {
            id: 2,
            name: "变配电状态",
            code: "ele1",
            level: 3,
            date: "2022-01-01",
            children: [
              {
                id: 3,
                level: 4,
                name: "新增",
                code: "Btn.ele1.add",
                date: "2022-01-01",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    name: "全部数据",
    date: "2022-01-01",
    id: 0,
    level: 1,
    children: [
      {
        id: 1,
        name: "变电站综合自动化",
        code: "ele",
        level: 2,
        date: "2022-01-01",
        children: [
          {
            id: 2,
            name: "变配电状态",
            code: "ele1",
            level: 3,
            date: "2022-01-01",
            children: [
              {
                id: 3,
                level: 4,
                name: "新增",
                code: "Btn.ele1.add",
                date: "2022-01-01",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    name: "全部数据",
    date: "2022-01-01",
    id: 0,
    level: 1,
    children: [
      {
        id: 1,
        name: "变电站综合自动化",
        code: "ele",
        level: 2,
        date: "2022-01-01",
        children: [
          {
            id: 2,
            name: "变配电状态",
            code: "ele1",
            level: 3,
            date: "2022-01-01",
            children: [
              {
                id: 3,
                level: 4,
                name: "新增",
                code: "Btn.ele1.add",
                date: "2022-01-01",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    name: "全部数据",
    date: "2022-01-01",
    id: 0,
    level: 1,
    children: [
      {
        id: 1,
        name: "变电站综合自动化",
        code: "ele",
        level: 2,
        date: "2022-01-01",
        children: [
          {
            id: 2,
            name: "变配电状态",
            code: "ele1",
            level: 3,
            date: "2022-01-01",
            children: [
              {
                id: 3,
                level: 4,
                name: "新增",
                code: "Btn.ele1.add",
                date: "2022-01-01",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    name: "全部数据",
    date: "2022-01-01",
    id: 0,
    level: 1,
    children: [
      {
        id: 1,
        name: "变电站综合自动化",
        code: "ele",
        level: 2,
        date: "2022-01-01",
        children: [
          {
            id: 2,
            name: "变配电状态",
            code: "ele1",
            level: 3,
            date: "2022-01-01",
            children: [
              {
                id: 3,
                level: 4,
                name: "新增",
                code: "Btn.ele1.add",
                date: "2022-01-01",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    name: "全部数据",
    date: "2022-01-01",
    id: 0,
    level: 1,
    children: [
      {
        id: 1,
        name: "变电站综合自动化",
        code: "ele",
        level: 2,
        date: "2022-01-01",
        children: [
          {
            id: 2,
            name: "变配电状态",
            code: "ele1",
            level: 3,
            date: "2022-01-01",
            children: [
              {
                id: 3,
                level: 4,
                name: "新增",
                code: "Btn.ele1.add",
                date: "2022-01-01",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    name: "全部数据",
    date: "2022-01-01",
    id: 0,
    level: 1,
    children: [
      {
        id: 1,
        name: "变电站综合自动化",
        code: "ele",
        level: 2,
        date: "2022-01-01",
        children: [
          {
            id: 2,
            name: "变配电状态",
            code: "ele1",
            level: 3,
            date: "2022-01-01",
            children: [
              {
                id: 3,
                level: 4,
                name: "新增",
                code: "Btn.ele1.add",
                date: "2022-01-01",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    name: "全部数据",
    date: "2022-01-01",
    id: 0,
    level: 1,
    children: [
      {
        id: 1,
        name: "变电站综合自动化",
        code: "ele",
        level: 2,
        date: "2022-01-01",
        children: [
          {
            id: 2,
            name: "变配电状态",
            code: "ele1",
            level: 3,
            date: "2022-01-01",
            children: [
              {
                id: 3,
                level: 4,
                name: "新增",
                code: "Btn.ele1.add",
                date: "2022-01-01",
              },
            ],
          },
        ],
      },
    ],
  },
];
let editMenu = () => {
  console.log(11);
  addUserFlaf.value = false;
  showDiaLog.value = true;
  titleName.value = "编辑菜单";
};
let getList = () => {};

const data = [
  {
    label: "Level one 1",
    children: [
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 2",
    children: [
      {
        label: "Level two 2-1",
        children: [
          {
            label: "Level three 2-1-1",
          },
        ],
      },
      {
        label: "Level two 2-2",
        children: [
          {
            label: "Level three 2-2-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 3",
    children: [
      {
        label: "Level two 3-1",
        children: [
          {
            label: "Level three 3-1-1",
          },
        ],
      },
      {
        label: "Level two 3-2",
        children: [
          {
            label: "Level three 3-2-1",
          },
        ],
      },
    ],
  },
];
</script>
<style lang="scss" scoped>
.menu {
  width: 100%;

  margin-top: 9px;
  display: flex;

  .main-content {
    display: flex;
    width: 100%;
    flex-direction: column;

    flex-shrink: 0;
    .content-wrap {
      height: calc(100vh - 168px - 9px);
      background-color: #022552;
      width: 100%;
      padding-top: 21px;
      padding-left: 15px;
      padding-right: 21px;
      .table-data {
        height: 630px;

        width: 1590px;
        .btn-wrap {
          display: flex;
          justify-content: center;
        }
        .distribute {
          width: 73px;
          height: 31px;
          background: rgba(97, 200, 255, 0.28);
          border: 1px solid #61c8ff;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 18px;
          color: #ffffff;
          cursor: pointer;
        }
        .table-height {
          height: 730px;
          /* width: 1590px; */
          :deep(.cell) {
            /* display: flex;
            align-items: center; */
          }

          .table-btn-wrap {
            width: 280px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .add {
              width: 107px;
              height: 31px;
              background: rgba(97, 200, 255, 0.3);
              border: 1px solid #61c8ff;

              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 18px;
              color: #ffffff;
              margin-right: 10px;
            }
            .edit {
              width: 73px;
              height: 31px;
              background: rgba(255, 218, 28, 0.3);
              border: 1px solid #ffda1c;
              margin-right: 10px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 18px;
              color: #ffffff;
            }
            .del {
              width: 73px;
              height: 31px;
              background: rgba(133, 18, 20, 0.3);
              border: 1px solid #ff2222;

              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 18px;
              color: #ffffff;
            }
          }
        }
        /* :deep(.el-table__header thead) {
          background: url("./images/table-header-bgc.png") no-repeat;
          background-size: 100% 100%;
          width: 100%;
        } */
        /* :deep(.el-table__header thead) {
          background: url("./images/table-header-bgc.png") no-repeat;
          background-size: 100% 100%;
       
          width: 100%;
        } */
        :deep(.el-table__row) {
          height: 56.2px !important;
          background-color: #022552 !important;

          .cell {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 16px;
            color: #fefefe;
          }
        }
      }
      .pagination {
        padding-right: 10px;
        padding-top: 8px;
      }
    }
  }
  .dia-content {
    padding-right: 20px;
    padding-top: 20px;
    :deep(.el-row) {
      margin-top: 10px;
    }

    .warning-detail :deep(.el-textarea__inner) {
      background-color: #235b87;
    }
    :deep(.el-input__wrapper) {
      height: 35px !important;
      border: 1px solid #2177bd;
      background-color: transparent;
      border-radius: 0;
    }
    .add-bgc {
      background: rgba(97, 200, 255, 0.35);
      border: none;
      border: 1px solid #61c8ff;
    }
  }
  :deep(.el-icon) {
    font-size: 15px;
    color: #fff;
  }
}
</style>
